<template>
    <h2>第二个</h2>
    <div>
        <!-- 文本插值会直接将数据解析为纯HTML -->
        文本插值:{{ msg }}<br/>
        年龄为:{{ age }}
    </div>
    <!-- 在vue中只要看到以v-开头语句,都试为vue指令 -->
    <div v-html="address">

    </div>
    <div>
        <input type="text" id="sid" name="Sname"/>
        <!-- v-bind指令用于将vue实例中的数据绑定到html属性中 v-bind因为适用频繁，支持省略为:属性 -->
        <input type="text" :id="sid" :name="sname"/>
        <!-- 从对象中取数据 -->
        <input type="text" :id="info.Nid" :name="info.Nname"/>
    </div>
    <div>
        <!-- v-for当前条件不满足是内容不会渲染 v-show当初始条件不满足时，内容会渲染，额外会 -->
        <!-- 应用场景：1.如果说当前的属性需要频繁进行数据切换，使用v-show 因为他只是在负责属性样式的切换，而v-if则是需要进行元素渲染 -->
        <p v-if="age==23">现在23了</p>
        <p v-show="age==23">现在23了</p>
    </div>
</template>

<script setup lang="ts">


const msg="哈哈哈哈";
const age=24;

const address="<a href='https://www.baidu.com/'>百度官网</a>"
 const sid="1001";
 const sname="张三";
 const info={
    Nid:"101",
    Nname:"李四"
 }
</script>

